<template>
	<view class="index">
		<view style="margin-bottom: 30rpx; height: 500rpx">
			<u-navbar bgColor="rgba(0,0,0,0)">
				<view slot="left" class="align-center">
					<!-- @click="toCommunity" -->
					<view class="align-end" @click="clickCity">
						<view style="font-weight: 600; font-size: 32rpx; color: #fff">{{ address }}</view>
						<image src="@/static/index/biao1.png" style="width: 12rpx; height: 12rpx"></image>
					</view>
					<view class="align-center" @click.stop="$tools.navigite('/pages/index/search')"
						style="border: 2rpx solid #fff; padding: 18rpx 28rpx; border-radius: 40rpx; margin-left: 30rpx">
						<image src="@/static/index/serach.png" style="width: 36rpx; height: 36rpx"></image>
						<view style="font-weight: 400; font-size: 28rpx; color: #ffffff; margin-left: 18rpx">搜索岗位、工作地点
						</view>
					</view>
				</view>
			</u-navbar>
			<u-swiper :list="list1" keyName="path" height="500" @change="(e) => (currentNum = e.current)"
				:autoplay="false" indicatorStyle="right: 20px"></u-swiper>
		</view>
		<view style="padding: 0 32rpx; margin-bottom: 30rpx" class="flex-between1">
			<view>
				<view class="align-end">
					<view @click="
							current = index;
              pageNum = 1;
							init();
						" v-for="(item, index) in navlist" :key="index" style="position: relative; margin-right: 50rpx">
						<view :class="index == current ? 'text1' : 'text2'">
							{{ item }}
						</view>
						<view v-if="index == current" style="
								width: 68rpx;
								height: 10rpx;
								background: linear-gradient(90deg, #1365f9 0%, rgba(255, 255, 255, 0) 100%);
								border-radius: 6rpx;
								position: absolute;
								bottom: 5rpx;
							"></view>
					</view>
				</view>
			</view>
			<view class="flex">
				<view @click="$tools.navigite('./postjob')" class="align-center"
					style="margin-right: 20rpx; padding: 8rpx 18rpx; height: 52rpx; font-weight: 400; font-size: 24rpx; color: #666666; background: #edf2f9; border-radius: 4rpx">
					岗位类别
					<u-icon name="arrow-down" color="#666666" size="28" :bold="true"
						style="margin-left: 10rpx"></u-icon>
				</view>
				<view @click="clickCity" class="align-center"
					style="padding: 8rpx 18rpx; height: 52rpx; font-weight: 400; font-size: 24rpx; color: #666666; background: #edf2f9; border-radius: 4rpx">
					<text class="ellipsis" style="width: 80rpx">{{ address }}</text>
					<u-icon name="arrow-down" color="#666666" size="28" :bold="true"
						style="margin-left: 10rpx"></u-icon>
				</view>
				<address-picker :show="addressShow" closeOnClickOverlay @confirm="confirmAddress"
					@cancel="addressShow = false" @close="addressShow = false" :address-data="addressData"
					:indexs="indexs" :areaId="areaId" :type="type"></address-picker>
			</view>
		</view>
		<view style="padding: 0 32rpx">
			<custom-waterfalls-flow ref="waterfallsFlowRef1" :value="list" @wapperClick="wapperClick"
				@imageClick="wapperClick">
				<view :slot="`slot${index}`" class="item" v-for="(item, index) in list" :key="index">
					<!-- 岗位名字 -->
					<view class="jobname">
						{{ item.jobName }}
					</view>
					<!-- 薪资范围 -->
					<view>
						<text class="salary">{{ item.salaryStart + '~' + item.salaryEnd }}</text>
						<text style="font-weight: 400; font-size: 24rpx; color: #fe4343">元/月</text>
					</view>
					<view class="dianpu">{{ item.companyName }}店</view>
				</view>
			</custom-waterfalls-flow>
		</view>
		<view v-if="list.length" class="flex-center1" style="padding-bottom: 30rpx;">
			<view class="">- 我是有底线的 -</view>
		</view>
		<view v-if="!list.length" style="padding-top: 100rpx; text-align: center">暂无数据，敬请期待~</view>
		<Tabbar :value="0" />
	</view>
</template>

<script>
	import mixin from '@/mixins/index';
	export default {
		mixins: [mixin],
		data() {
			return {
				address: '城市',
				addressShow: false,
				indexs: [0, 0, 0],
				areaId: [-1, -1, 110101],
				addressData: ['不限', '不限', '东城区'],
				type: 2, //1-省，2-省市，3-省市区
				area: '', //区域id
				jobType: [], //岗位类型
				title: 'Hello',
				show1: false,
				show2: false,
				current: 0,
				navlist: ['推荐', '高薪', '最新'],
				columns: [
					['中国', '美国', '日本']
				],
				list: [],
				list1: [],
				pageNum: 1,
				pageSize: 20,
				isLastPage: false
			};
		},
		onLoad() {
			this.list = [];
			this.init();
			this.getimg();
			switch (this.$store.state.identity) {
				case 2:
					this.$tools.navigiteTo('/pages1/index/index');
					break;
				case 3:
					this.$tools.navigiteTo('/pages2/index/index');
					break;
			}
			// 获取地理位置,定位
			// setTimeout(() => {
			// 	this.getMapLocation();
			// }, 6000)

		},
		onReachBottom() {
			if (this.isLastPage) return;
			this.pageNum++;
			this.getgw();
		},
		methods: {
			clickCity() {
				this.addressShow = true
				this.getMapLocation();
			},
			getimg() {
				this.$request('front/search/slideList').then((res) => {
					console.log(res, '图');
					this.list1 = res.obj;
				});
			},
			init() {
				console.log("是什么类型", this.current)
				this.list = [];
				this.getgw();
				this.$refs.waterfallsFlowRef1.refresh();
			},
			getgw() {
				this.$request('front/search/postList', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					sortType: this.current + 1,
					area: this.area == -1 ? '' : this.area,
					jobType: this.jobType
				}).then((res) => {
					let list = res.obj.list
					list.map((item, index) => {
						if (item.projectImg) {
							item.image = item.projectImg.split(',')[0];
						}
					});
					this.list = this.list.concat(list)
					console.log(this.list, 'this.list');
					this.isLastPage = res.obj.isLastPage;
				});
			},
			confirm(e) {
				console.log('confirm', e);
				this.show1 = false;
			},
			confirmAddress(val) {
				console.log(val);
				this.address = val.value[1];
				this.area = val.areaId[1];
				this.addressShow = false;
				this.init();
			},
			cancel() {
				this.show1 = false;
			},
			close() {
				this.show1 = false;
			},
			async wapperClick(item) {
				console.log('单项点击事件', item);
				const token = uni.getStorageSync("token")
				if (token) {

					await this.statis(item.id, 1);
					this.$tools.navigite('./detail', item.id);
				} else {
					uni.showToast({
						title: "登录之后才能查看详情",
						duration: 3000,
						icon: "none"
					})
					// 去登录
					// uni.redirectTo({
					// 	url: '/pages/login/login'
					// })
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.ellipsis {
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		overflow: hidden;
		/* 隐藏超出容器的内容 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
	}

	.index {
		background: #f5f6fa;

		.text1 {
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
		}

		.text2 {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.item {

		width: 330rpx;
		margin-bottom: 30rpx
	}

	.jobname {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		margin: 15rpx;
	}

	.salary {
		font-weight: 500;
		font-size: 32rpx;
		color: #fe4343;
		margin-left: 15rpx;
		margin-right: 15rpx
	}

	.dianpu {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-left: 15rpx;
		margin-right: 15rpx
	}
</style>
